How to Build a GUI

The user interface is the method by which people communicate with computers. People need a way to give commands to the computer and it needs a way to provide the information. In earlier days, people had to flip switches on the computer to give it commands. Later, people could punch holes in cards that were then fed into the computer to be read and acted on. The output was in the form of sheafs of fanfold paper. That was rather a clunky interface! In addition to being cumbersome, it also limited the types of interaction possible.

The introduction of keyboards and monitors was a great improvement to the user interface. It was no longer necessary to punch instructions onto cards, feed them into the machine and wait for a printout. People could sit at the keyboard, type instructions for the computer and get a response quickly on the screen. This interface, although much better than previous methods, was still limited. It required a lot of typing on the part of the user, and it required the user to remember a lot of commands and key combinations.

Graphical User Interface

Computers soon came with graphical interfaces. The user no longer had to type and type to select a program to run, give it information, and respond to its requests. It was now possible to use a new device - the mouse - to navigate to locations on the display and click the mouse button while the cursor was over a graphical control to interact with it. The user could click on an item in a list to select it. He could click on a button to send a command. Soon, he could even draw pictures on the screen by dragging the mouse. Windows ™ soon became the standard GUI shell for personal computers.

The Console, or MainWindow

The early interface that required a user to type instructions, with input and output displayed on the monitor as text is called "console programming." Liberty BASIC does not provide access to the console, but it does provide a similar feature in the MainWindow. This is a text-only window that allows a user to read text, enter text, and press ENTER to send the text to the program for evaluation. The MainWindow is a great way to test small routines, such as text parsing or number crunching, before inserting them into larger programs. Entire programs can be written in the MainWindow, but that style of programming is largely outdated. Users have come to expect Graphical User Interfaces.

Window Types

The GUI begins with a window. A window holds the controls used by the program. Liberty BASIC provides several window types. Use the one that best suits the requirements of the program. Windows are created with the OPEN command.

Open "Window Title" for purpose as #handle

The "purpose" argument can be one of the following:

Text This type of window is quite limited. It provides a texteditor with an automatic "File" menu and an automatic "Edit" menu. You can add other menus to a window opened "for text" but you cannot add controls. Text windows are best used to display text to the user, such as program instructions.
Graphics This type of window is meant to display graphics. Graphics can be loaded bitmaps, or graphics drawn by the program, such as lines, circles, boxes, text, etc. Although it is possible to locate controls in graphics windows, it is not a good idea, because some controls do not work properly in graphics windows. Graphics windows are meant to display graphics!
Dialog Dialog windows are best suited for getting information from a user, although it is possible to have entire programs that are dialog-based. Windows of type "dialog" can contain all of the available controls except menus. Dialog windows allow the user to hit the TAB key to move focus from one control to the next. A dialog can have a default button that is activated when the user hits the ENTER key. (To create a default button, create a button with the extension ".default.") For this reason, texteditors do not work well in dialog windows, because hitting ENTER is trapped by the window and the user cannot add a carriage return to text in a texteditor. Dialog windows may display as "modal," which means that they receive the input focus for the program until they are closed. Other program windows cannot be accessed by a user while a modal dialog is displayed. Do not use dialog windows for programs that rely on users entering large amounts of text in texteditor controls, or for programs that require menus.
Window Windows of type "window" are the most used and useful windows in Liberty BASIC. They can contain any of the controls. They have an optional sizing frame, an optional titlebar, and optional menus. It is now also possible for the user to hit the TAB key to move focus from one control to the next in a window of type "window."

Adding Controls

A BMPBUTTON is a clickable button that displays an image.
A BUTTON is a clickable button with a text label.
A CHECKBOX is a small box that can be checked or unchecked by the user, or by the programmer. It displays a text label. A checkbox is used when giving a user options from which to choose.
A COMBOBOX is a form of list. It displays on the window as a small textbox with an arrow at the side. When the user clicks the arrow, the list drops down and the user can make a selection.
A GRAPHICBOX is a box that displays graphics, such as bitmap images, or drawn objects like circles and lines, or even text.
A GROUPBOX consists of a label and a box. The box can contain other controls, so that they may be grouped for easy identification. Radiobuttons within a groupbox function as a set.
A LISTBOX is a form of list. It appears as a list of items in a box on the window.
A MENU is a dropdown list of user commands that appears on a bar below the titlebar of a window.
A POPUPMENU is a dropdown list of user commands that appears where the mouse is located when the popupmenu command is issued.
A RADIOBUTTON is a small round box that can be clicked by the user. It has a text label. Radiobuttons function in groups. Only one in a group of radiobuttons may be set at a time. Setting one button clears the other buttons.
A STATICTEXT is a simple text label used to give information to the user.
A TEXTBOX is a simple box that contains text. The user can type into the textbox, or it can be filled with text by the program.
A TEXTEDITOR is a large box with both horizontal and vertical scrollbars. Text can be placed in the texteditor by the programmer, or the user can type into the texteditor. A texteditor is used to get a large amount of text input from the user, or to display a large amount of text.

Controls are added to a window by issuing the command to create the control before the command to open the window. A window that contains a textbox and a button is opened like this:

nomainwin    'prevent mainwindow from opening
textbox #win.textbox1, 10, 10, 100, 26              'create a textbox
button #win.button1, "E&xit", [quit], UL, 60, 60    'create a button
open "Create a GUI" for window as #win              'open a window
wait

Reacting to User Input

It is easy to create a graphical user interface with commmands to create controls and to open a window. The GUI is not useful unless it can actually react to user events! Controls like buttons, radiobuttons, listboxes and others include the name of the control's event handler in the statement that creates the control. In Liberty BASIC 4, this can be a branch label or sub name. In previous versions of LB, it is a branch label. This event handler is triggered when the user activates the control by pressing a button, selecting an item in a listbox, etc. The program must include code routines to handle the event in the designated routine. In the code above, the button has an event handler called [quit]. Code to handle the button press must be placed in the [quit] branch label.

The following routine asks the user if he really wants to end the program. If he answers "no" the program simply stops and waits, otherwise the window is closed with a CLOSE command and the program is ended with an END command:

[quit]
confirm, "Really quit?";answer$
if answer$ = "no" then wait
close #win:end

Windows themselves can also respond to user events. Liberty BASIC gives windows the ability to trap the "close" event of a window, which occurs when a user closes with the X button or the system menu on the titlebar of the window. It also allows windows to trap the "resize" event that happens when a user resizes a window. The "close" event is trapped with the "trapclose" command, like this:

#win "trapclose [quit]"

Notice that both the window and the button use the same event handler. Try closing the window with the button. Then try closing it with the X button on the titlebar. Both events trigger the [quit] routine.

nomainwin    'prevent mainwindow from opening
textbox #win.textbox1, 10, 10, 100, 26              'create a textbox
button #win.button1, "E&xit", [quit], UL, 60, 60    'create a button
open "Create a GUI" for window as #win              'open a window
#win "trapclose [quit]"                             'trap window close event
wait

[quit]
confirm, "Really quit?";answer$
if answer$ = "no" then wait
close #win:end

Home

Tips For the Hobbyist